<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Index</title>
		<script type="text/javascript" src="${scriptsUrl}/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="${scriptsUrl}/jquery.superflydom-0.9g.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${schemaUrl}/jquery.autocomplete.css" />
		<script type="text/javascript" src="${scriptsUrl}/jquery.autocomplete.min.js"></script>
	</head>
	<body>
		<s:url action="ajaxToJson" id="ajaxToJsonAlbumsUrl" escapeAmp="false" namespace="/balkanton" includeParams="get">
			<s:param name="what">searchAlbums</s:param>
		</s:url>
	
		<!-- user login/logout -->
		<s:if test="logged==true">
			<div align="rigth"><s:property value="loggedUser"/>&nbsp;<a href="logout">Logout</a></div>
		</s:if>
		<s:else>
			<div align="rigth"><a href="login">Login</a></div>
		</s:else>
		<!--  -->
		<p>Search: <s:textfield name="searchAlbum" id="searchAlbum" cssClass="inputFld w150" title="Search Album" /></p>
		<!-- content -->

<script type="text/javascript">
	$(document).ready(function () {
		/* Album Autocompleter */
		$("#searchAlbum").autocomplete('${ajaxToJsonAlbumsUrl}', {
			dataType: 'json',
			parse: function(data) {
				return $.map(data, function(row) {
					return {
						data: row,
						value: row.id,
						result: row.info
					};
				});
			},
			formatItem: function(row) {
				return '(' + row.id + ') ' + row.value + "<br/>"+ row.info;
			},
			width: 320,
			max: 20
		}).result(function(e, item) {
			if (item != undefined) {
				var url = 'albumView?catalog=' + item.id;
				window.location = url;
			}
		});
	});
</script>

	</body>
</html>
